<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css">
		<title>打飞机</title>
		<style type="text/css">
		  #wrap{
		  	position: relative;
		  }
		  #message{
		  	left: 20%;
		  	position: absolute;
		  	top: 42.1875%;
		  	background:rgba(150, 150, 150, 0.6);
		  	width: 60%;
		  	height: 100px;
		  	text-align:center;
		  }
		  #messageOver{
		  	left: 20%;
		  	position: absolute;
		  	top: 42.1875%;
		  	background:rgba(150, 150, 150, 0.6);
		  	width: 60%;
		  	height: 100px;
		  	text-align:center;
		  }
		  #message a{
		  	width:100%;
		  	height: 48px;
		  	display: block;
		  	line-height: 48px;
		  	font-size: 20px;
		  	border: 1px solid gray;
		  	border-radius:2px;
		  }
		  #messageOver a{
		  	width:100%;
		  	height: 48px;
		  	display: block;
		  	line-height: 48px;
		  	font-size: 20px;
		  	border: 1px solid gray;
		  	border-radius:2px;
		  }
		  #messageOver p{
		  	width:100%;
		  	height: 48px;
		  	display: block;
		  	line-height: 48px;
		  	font-size: 20px;
		  	border: 1px solid gray;
		  	border-radius:2px;
		  }
		  
		  #loading{
		  	position: absolute;
		  }
		  #read{	
		  	position: absolute;
		  	height: 300px;
		  	width: 200px;
		  	top: 23.59154929%;
		  	left: 18.75%;
		  	background: rgb(180,180,180);
		  }
		  #read div{
		  	text-align: center;  
		  	margin-top: 50px;
		  }
		  #read p{
		  	color: red;
		  	font-size: 15px;
		  	line-height: 50px;
		  }
		  #read #closeRead{
		  	color: white;
		  }
		  #score{
		  	position: absolute;
		  	top: 5px;
		  	left: 5px;
		  	font-size: 15px;
		  	color: red;
		  }
		  #bomb{
		  	position: absolute;
			bottom: 5px;
			left: 5px;
		  }
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="musicContainer">
			<!--背景音乐-->
				<audio src="音乐/game_music.mp3" loop="loop" id="background_music" autoplay></audio>
				<!--子弹发射的音乐-->
				<audio src="音乐/bullet.mp3" id="bullet_music"></audio>
				<!--敌人被击落的音乐-->
				<audio src="音乐/enemy1_down.mp3" id="enemy1_music"></audio>
				<audio src="音乐/enemy2_down.mp3" id="enemy2_music"></audio>
				<audio src="音乐/enemy3_down.mp3" id="enemy3_music"></audio>
				<!--游戏结束-->
				<audio src="音乐/game_over.mp3" id="gameOver_muisc"></audio>
			</div>
			<p id="score">分数:0</p>
			<img src="img/loading.gif" id="loading"/>
			<canvas id="canvas"></canvas>
			<div id="message" style="display: none;">
				<a href="#" id="gameStart">开始游戏</a>
				<a href="#" id="gameInfo">游戏说明</a>
			</div>
			
			<div id="messageOver" style="display: none;">
				<p id="restartScore">分数:1000</p>
				<a href="#" id="gameRestart">重新开始</a>
			</div>
			
			<div id="read" style="display: none;">
				<a href="#" id="closeRead">关闭</a>
				<div>
				<p>电脑使用上下左右键控制飞机</p>
				<p>移动用户手指移动控制飞机</p>
				<p>注意吃能量包</p>
				<p>击落的飞机越多，分数越高</p>
				</div>	
			</div>
			<img src="img/bomb.png" id="bomb" style="display: none;"/>
		</div>		
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/判断设备类型.js"></script>
	<script type="text/javascript" src="js/准备工作.js"></script>
	<script type="text/javascript" src="js/背景.js"></script>
    <script type="text/javascript" src="js/飞机.js"></script>
	<script src="js/敌人.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/子弹.js"></script>
	 <script src="js/补给.js" type="text/javascript"></script>
	 <script src="js/操作类.js" type="text/javascript"></script>
	<script type="text/javascript">
		var SUMSCORE= 0;	
	
	
		$("#loading").css({
			width: "31px",
			height: "31px",
			top: "47.27112676%",
			left:"45.15625%"
		});

		function preLoadImagesFun(obj,callBack){
			var didLoaded = 0;
			var needLoad = obj.length;
			var imagesArray = [];
			for(var i = 0; i < needLoad;i ++){
				imagesArray[i] = new Image();
				imagesArray[i].src = obj[i];
				imagesArray[i].onload = loadFun;
				// console.log(i);
			}

			function loadFun(){
				didLoaded++;
				if (didLoaded >= needLoad) {
					callBack(imagesArray);
				};
			}
		}
			
		var imgsPic = ["img/background.png","img/bomb.png","img/bullet1.png","img/bullet2.png","img/enemy1.png","img/enemy2.png","img/enemy3.png","img/herofly.png","img/loading.gif","img/prop.png"];
		preLoadImagesFun(imgsPic,function(){
			$("#loading").hide();
			$("#message").show();
			var background = new backgroundClass();
			background.drawImage();
			 planeHero = new PlaneHero();
			 planeHero.init();
			 var bulletContralle = new BulletClass();
			 var enemyplane = new EnemyControllerClass();
			 var handle = new HandleClass();
			 handle.handlePlane(planeHero);
			 energyBall = new energyClass();
			  function sumoperation(){
			  	$("#message").hide();
			  	$("#messageOver").hide();
			 	timer=setInterval(function(){
			 		
			 		context.clearRect(0,0,canvas.width,canvas.height);
			 		background.bckslide();
			 		planeHero.drawPlane();
			 		planeHero.movePlane(5);
	     		    bulletContralle.moveBullet(planeHero);	
			 		enemyplane.createAndShowEnemy();
			 		energyBall.creatEnergy(); 
			 		handle.bulletFireEnemy(bulletContralle,enemyplane,planeHero,energyBall,background);
			 		handle.planeIsEatEnergy(planeHero,energyBall);
			 	},20);
			 }
			 $("#gameStart").on("click",sumoperation);
			 $("#gameStart").on("tap",sumoperation);
			 
			 $("#gameRestart").on("click",sumoperation);
			 $("#gameRestart").on("tap",sumoperation);
			 
			  $("#gameRestart").on("click",function(){
			  	$("#score").text("分数:"+ 0);
//			  	alert(111);
			  });
			 
			 $("#gameInfo").on("click",function(){
			 	$("#message").hide();
			 	$("#read").show();
			 });
			  $("#gameInfo").on("tap",function(){
			 	$("#message").hide();
			 	$("#read").show();
			 })
			  $("#closeRead").on("click",function(){
			 	$("#message").show();
			 	$("#read").hide();
			 });
			   $("#closeRead").on("tap",function(){
			 	$("#message").show();
			 	$("#read").hide();
			 });
			 
			 
		});
	</script>
	
</html>
